<template>
	<view>
		<view class="search-cont">
			<view class="search">
				<input type="text"  placeholder-class="inputclass" confirm-type ="search" 
				focus="true"
				placeholder="请输入关键字"
				v-model="storeName"
				@confirm="onKeyInput"/>
			</view>
			<view class="search-code" @click="seArch()">
				搜索
			</view>
		</view>
		
		
		<!-- 内容展示 -->
		<view class="list" v-for="(l2it,l2in) in pageInfo" :key="l2in">
			<view @click="takEout(l2it.storeId)"><image class="logo" :src="l2it.img"></image></view>
			<view class="info" @click="takEout(l2it.storeId)">
				<view class="name">
					{{l2it.storeName}}
				</view>
				<view class="h1">
					<view>月售{{l2it.salenum}}</view>
					<view>距离{{l2it.distance}}km</view>
				</view>
				<view class="h2">
					<view>商圈:{{l2it.circlessName}}</view>
					<view>评分:{{l2it.storeScore}}</view>
					<view>人均￥{{l2it.capita}}</view>
				</view>
				<view class="h2">{{l2it.storeType}}</view>
			</view>
		</view>
		
		<!-- 反馈组件 
		<tips ref="tips"></tips>-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeName:'',//店铺明细
				pageInfo:[],//结果数组
			}
		},
		onLoad(option){
			//this.orderId=option.orderId
			//调用请求然后获得订单的数据
			//this.loadData(this.orderId)
		},
		methods: {
			takEout(id){
				console.log(id)
				wx.navigateTo({
					url:'../info/info?id=' + id
				})
			},
			seArch(){
				uni.request({
					url:this.baseurl + 'sStore/searchby',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						
					},
					data:{
						//page:this.page,
						//size:5,
						//status:this.tabCurrentIndex,
						storeName:this.storeName,
					},
						success: (res) => {
						this.pageInfo=res.data.data,
						console.log('订单更多',this.pageInfo)
						}
					})
				},						
			stopPrevent(){}
		}
	}
</script>

<style scoped>
	@import "../../common/meituan.css";
	.content-left{margin: 0 20upx;}
	.search{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		background:#f8f8f8;
		border-radius: 20upx;
		margin-left: 20upx;
		}
	.search input{
			height: 70upx;
			line-height: 70upx;
			width: 100%;
			font-size: 30upx;
			color: #666666; 
			padding-left: 30upx;
			  } 
	.search-cont{display: flex; justify-content: space-between; height: 70upx; align-items: center;
				padding: 30upx 0;
				}
	.search-code{width: 150upx; height: 50upx; text-align: center; font-size: 30upx;}
	/* 搜索历史 */
	.search-history{margin: 20upx;}
	.search-title{font-size: 30upx; font-weight: bold;
				display: flex;
				justify-content:space-between;
				align-items: center;
				height: 60upx;
				line-height: 60upx;}
	.search-title image{width: 36upx; height: 36upx; display: block;}
	.menu-block view {
		background: #f7f8fa;
		border-radius: 6upx;
		font-size: 27upx;
		color: #292c33;
		text-align: center;
		padding: 10upx;
		margin: 20upx 20upx 0 0;
	}
	
	.menu-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.list{display: flex;margin:20upx;border-bottom:2upx solid #999999;}
	.logo{width:200upx;height:180upx;}
	.info{width:500upx;margin:0 20upx;}
	.name{font-size:28upx;font-weight:bold;color:#333333;line-height:44upx;}
	.h1{display:flex;justify-content:space-between;font-size:20upx;color:#333333;line-height:44upx;}
	.h2{display:flex;font-size:20upx;color:#333333;line-height:44upx;}
	.h2 view{margin-right:30upx;}
</style>
